<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="900px">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="80px">
      <el-form-item
        label="名称"
        prop="eventName">
        <el-input
          v-model="form.eventName"
          placeholder="规则名称不超过64个字符"
          :clearable="true"/>
      </el-form-item>

      <el-form-item
        label="描述"
        prop="description">
        <el-input
          v-model="form.description"
          placeholder="描述内容不超过256个字符"
          type="textarea"
          :rows="2"/>
      </el-form-item>

      <el-form-item
        label="条件"
        prop="rule">
        <rules :data="ruleData" :dropData="dropData" :filedData="filedData"/>
        <!-- <el-input
          v-model="form.rule"
          placeholder=""
          type="textarea"
          :rows="5"/> -->
      </el-form-item>

      <el-form-item
        label="是否启用"
        prop="isUse">
        <el-switch
          v-model="form.isUse"
          active-value="1"
          inactive-value="0">
        </el-switch>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button
        @click="dialogFormVisible = false"
        size="small">取消</el-button>

      <el-button
        v-if="isAdd"
        type="primary"
        @click="create"
        size="small">确定</el-button>

      <el-button
        v-if="!isAdd"
        type="primary"
        @click="update"
        size="small">修改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addRuleItem,
  updateRuleItem,
  selectLogicData,
  getFieldData
} from '@/api/analysis/intelligent'
export default {
  components: {
    'Rules': () => import('../log-rule')
  },
  data() {
    return {
      isAdd: true,
      dialogTitle: '新增',
      dialogFormVisible: false,
      form: {
        id: '',
        groupId: '',
        eventName: '',
        isUse: '1',
        aviatorExp: 'ceshi',
        createName: 1
      },
      rules: {
        eventName: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          },
          {
            max: 64,
            message: '长度不能大于 64 个字符',
            trigger: 'blur'
          }
        ]
      },
      ruleData: [
        {
          id: 1,
          label: '&& AND',
          type: 'AND',
          children: [],
          operands: []
        }
      ],
      dropData: [
        {
          value: 1,
          label: '逻辑运算',
          icon: 'el-icon-link',
          children: [
            {
              value: 'AND',
              label: '&& AND',
              type: 'AND'
            },
            {
              value: 'OR',
              label: '|| OR',
              type: 'OR'
            },
            {
              value: 'NOT',
              label: '!= NOT',
              type: 'NOT'
            }
          ]
        },
        {
          value: 2,
          label: '字段条件',
          icon: 'el-icon-discount'
        }
      ],
      filedData: []
    }
  },
  created() {
    this.getLogicData()
    this.getFieldData()
  },
  methods: {
    init(data, flag) {
      // 先清空数据
      this.clearForm()
      // 新增
      if (data.type === 'add') {
        this.dialogTitle = '新增'
        this.isAdd = true
        this.form.groupId = data.groupId
      } else if (data.type === 'update') { // 修改
        this.dialogTitle = '修改'
        this.isAdd = false
        this.form = { ...data }
        this.form.isUse = this.form.use ? '0' : '1'
        this.ruleData = this.form.json === '{}' ? this.ruleData : JSON.parse(this.form.json)
      }
      this.dialogFormVisible = flag
    },
    // 清空数据
    clearForm() {
      this.ruleData = [{
        id: 1,
        label: '&& AND',
        type: 'AND',
        children: [],
        operands: []
      }]
      this.form.eventName = ''
      this.form.description = ''
    },
    getLogicData() {
      selectLogicData().then(res => {
        res.forEach(element => {
          element.label = element.name + ' ' + element.value
        })
        this.dropData[0].children = res
      })
    },
    getFieldData() {
      getFieldData().then(res => {
        this.filedData = res
      })
    },
    create() {
      this.form.jsonArray = this.ruleData
      this.form.isUse = parseInt(this.form.isUse)
      localStorage.setItem('ruleData', JSON.stringify(this.form))
      this.$refs.form.validate(valid => {
        if (valid) {
          addRuleItem({ ...this.form })
            .then(res => {
              if (res.code === 200) {
                this.dialogFormVisible = false
                this.$emit('handleRuleRefresh', this.form.groupId)
              }
            })
            .catch(() => {
            })
        }
      })
    },
    update() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateRuleItem({ ...this.form })
            .then(res => {
              this.dialogFormVisible = false
              this.$emit('handleRuleRefresh', this.form.groupId)
            })
            .catch(() => {
            })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
